<template>
  <div class="powerGenerationTrend">
    <div class="boxTitle">
      <img src="@/assets/images/home/rulu.png" alt="" />
      <span class="title">吨入炉垃圾发电趋势</span>
    </div>
    <lineChart :data="chartData.data"></lineChart>
  </div>
</template>

<script setup lang="ts">
import lineChart from "../components/lineChart.vue";
const chartData = reactive({
  data: [
    { date: "1", value: 50 },
    { date: "2", value: 210 },
    { date: "3", value: 200 },
    { date: "4", value: 150 },
    { date: "5", value: 130 },
    { date: "6", value: 160 },
    { date: "7", value: 100 },
    { date: "8", value: 120 },
    { date: "9", value: 130 },
    { date: "10", value: 110 },
    { date: "11", value: 120 },
    { date: "12", value: 30 },
  ] as any,
});
</script>

<style lang="scss" scoped>
.powerGenerationTrend {
  transition: transform 0.5s ease;
  position: absolute;
  background-size: 100% 100%;
  z-index: 999;
  padding-left: vh(21);
  padding-right: vh(21);
  background: url(@/assets/images/home/left2.png) no-repeat;
  background-size: 100% 100%;
  left: vw(20);
  top: vh(385);
  width: vh(421);
  height: vh(312);

  .boxTitle {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: vh(8);

    .title {
      margin-left: vh(6);
      font-family: Source Han Sans CN;
      font-weight: 500;
      font-size: vh(16);
      color: #00e3fe;
      line-height: vh(16);
    }

    img {
      width: vh(15);
      height: vh(17);
    }
  }
}
</style>
